<div class="container">
  <div class="col-md-6 col-md-offset-3">
    <div class='panel panel-default'>
      <div class='panel-heading'>
        找回密码
      </div>
      <div class='panel-body'>
        <div class='form-group'>
          <label for='newPassword'>新密码</label>
          <input class='form-control' type='password' id='newPassword' size='30' v-model="newPassword"/>
        </div>
        <div class='form-group'>
          <label for='reNewPassword'>再新密码</label>
          <input class='form-control' type='password' id='reNewPassword' size='30' v-model="reNewPassword"/>
        </div>
        <button type="submit" class="btn btn-primary" v-on:click="resetPassword()">保存</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var loginname = '<%= typeof(loginname) !== "undefined" && loginname ? loginname : ""%>';
  var key = '<%= typeof(key) !== "undefined" && key ? key : ""%>';

  var vue = new Vue({
    el: '#app',
    data: {
      newPassword: '',
      reNewPassword: '',
      errorMsg: '',
      successMsg: ''
    },
    methods: {
      resetPassword() {
        vue.errorMsg = '';
        if (vue.newPassword !== vue.reNewPassword) {
          vue.errorMsg = '两次输入的密码不一致';
          return;
        }

        if (vue.newPassword === '' || vue.reNewPassword === '') {
          vue.errorMsg = '请输入新密码';
          return;
        }

        if (vue.newPassword.length < 6 || vue.reNewPassword < 6) {
          vue.errorMsg = '密码太短';
          return;
        }

        vue.errorMsg = '';
        vue.successMsg = '';

        $.post(dataPrefix + '/user/authSearchPassword',
          { appId: appId,
            _csrf: $('#_csrf').val(),
            key: key,
            loginname: loginname,
            newPassword: vue.newPassword,
            reNewPassword: vue.reNewPassword
          },
          function(result) {
            if (result.err) {
              vue.errorMsg = result.err;
              vue.successMsg = '';
              return;
            }

            vue.newPassword = '';
            vue.reNewPassword = '';
            vue.successMsg = result.msg;
          });
      }
    }
  });
</script>
